<template>
  <div class="">
    <el-dialog
        :title="title"
        :visible.sync="dialogFormVisible"
        width="800px"
        :close-on-click-modal="false"
        @close="close"
    >
      <div class="tabledata">
        <el-table v-loading="listLoading" :element-loading-text="elementLoadingText" :data="list" stripe
                  style="width: 100%">
          <el-table-column prop="portrait" label="昵称/图像" width="400">
            <template slot-scope="scope">
              <div class="flex flex-y-top">
                <div class>
                  <img class="goodlogo bor_rad50" :src="scope.row.portrait"/>
                </div>
                <div class="mar_l10">
                  <div class="">
                    <div class>{{ scope.row.userName }}</div>
                    <div>
                      <el-tag size="mini" type="info" class="mar_l5">（ID:{{ scope.row.bindId }}）</el-tag>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="加入时间"></el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            :current-page.sync='page.currentPage'
            @current-change="handleCurrentChange">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="close">取 消</el-button>
        <el-button size="medium" type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getOffline} from "@/api/plug";

export default {
  name: "labelSave",
  created() {
  },
  data() {
    return {
      list: [],
      listLoading: false,
      selectRows: "",
      elementLoadingText: "正在加载...",
      page: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
      form:{

      },
      title: "",
      dialogFormVisible: false,
    }
  },
  components: {},
  methods: {
    showEdit(row,type) {
      if (type == '1') {
        this.title = "一级下线情况";
      }
      else if (type == '2') {
        this.title = "二级下线情况";
      } else {
        this.title = "编辑";
        // this.form = Object.assign({}, row);
      }
      this.type = type
      this.userId = row.userId
      this.fetchData()
      this.dialogFormVisible = true;
    },
    close() {
      // this.$refs["form"].resetFields();
      // this.form = this.$options.data().form;
      this.dialogFormVisible = false;
    },
    async fetchData() {
      this.listLoading = true;
      const {data, count} = await getOffline({page: this.page.currentPage,type:this.type,userId:this.userId});
      this.list = data;
      this.page.total = count;
      setTimeout(() => {
        this.listLoading = false;
      }, 100);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    save() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          const {msg} = await labelSave(this.form);
          this.$baseMessage(msg, "success");
          this.$emit("fetchData");
          this.close();
        } else {
          return false;
        }
      });
    },
  }
};
</script>
